<template>
  <el-container>
    <el-header
      style="background-color: #363636; height: 60px; padding-top: 10px"
    >
      <el-row>
        <el-button
          type="text"
          @click="home()"
          style="
            color: #409eff;
            float: left;
            margin-left: 20px;
            font-size: 20px;
          "
          >Home</el-button
        >
        <el-button
          type="text"
          @click="logout()"
          style="color: red; float: right; margin-right: 20px"
          >注销</el-button
        >
      </el-row>
    </el-header>
    <el-main
      style="width: 50%; margin-left: 25%; height: 90vh; margin-top: 20px"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="tabSelect">
        <el-tab-pane label="用户管理" name="first">
          <el-table :data="users" style="width: 100%; height: 100%">
            <el-table-column label="account" prop="name" width="180">
            </el-table-column>
            <el-table-column label="password" prop="password" width="200">
            </el-table-column>
            <el-table-column label="token" prop="token"> </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteUser(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="商品管理" name="second">
          <div style="height: 70vh">
            <el-table :data="goods" style="width: 100%" height="100%">
              <el-table-column label="name" prop="title" width="500">
              </el-table-column>
              <el-table-column label="price(元)" prop="price">
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteGood(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button @click="addGood()" type="primary" style="float:right;margin-top: 20px;">添加商品</el-button>
        </el-tab-pane>
        <el-tab-pane label="评论管理" name="third">
          <el-table :data="comments" style="width: 100%; height: 100%">
            <el-table-column label="date" prop="date" width="100">
            </el-table-column>
            <el-table-column label="user" prop="userName" width="100">
            </el-table-column>
            <el-table-column label="good" prop="goodTitle" width="300">
            </el-table-column>
            <el-table-column label="comment" prop="comment"> </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteComment(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>
  
  <script>
import store from "../store";

export default {
  name: "Admin",
  data() {
    return {
      activeName: "first",
      users: [],
      goods: [],
      comments: [],
    };
  },
  mounted: function () {
    this.search(); //页面加载时自动执行
  },
  methods: {
    addGood(){
      this.$router.push("/add");
    },
    tabSelect() {},
    handleDeleteComment(index, comment) {
      this.$apiFun
        .removeComment({
          commentToken: comment.token,
          goodId: comment.goodId,
        })
        .then((response) => {
          if (response["success"]) {
            this.comments.splice(index, 1);
          } else {
            alert(response["msg"]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleDeleteUser(index, user) {
      this.$apiFun
        .removeUser({
          userName: user.name,
        })
        .then((response) => {
          if (response["success"]) {
            this.users.splice(index, 1);
          } else {
            alert(response["msg"]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleDeleteGood(index, good) {
      this.$apiFun
        .removeGood({
          goodName: good.title,
        })
        .then((response) => {
          if (response["success"]) {
            this.goods.splice(index, 1);
          } else {
            alert(response["msg"]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    home() {
      this.$router.push("/admin");
    },
    logout() {
      this.$router.push("/");
    },
    search() {
      this.$apiFun
        .manageData({})
        .then((response) => {
          if (response["success"]) {
            if (this.users.length > 0) this.users.splice(0, this.users.length);
            response.data.users.forEach((ele) => {
              this.users.push(ele);
            });
            if (this.goods.length > 0) this.goods.splice(0, this.goods.length);
            response.data.goods.forEach((ele) => {
              this.goods.push(ele);
            });
            if (this.comments.length > 0)
              this.comments.splice(0, this.comments.length);
            response.data.comments.forEach((ele) => {
              this.comments.push(ele);
            });
          } else {
            alert(response["msg"]);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
  <style>
.image {
  width: 200px;
  height: 200px;
}
</style>
  